<template>
  <el-table :data="tableData" :header-cell-style="{textAlign:'center'}" stripe style="width: 100%;border-radius: 5px 5px 0 0;">
    <el-table-column prop="articleTitle" label="标题" >
      <template #default="scope">
        <router-link class="RLink" :to="`/showArticle/${scope.row.articleId}`">
          {{scope.row.articleTitle}}
        </router-link>

      </template>
    </el-table-column>
    <el-table-column align="center" class="column" prop="publishTime" label="发布日期"> </el-table-column>
  </el-table>
  <el-pagination
      class="fyt"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      :layout="layout"
      :total="total"
      :pager-count=5
  >
  </el-pagination>
</template>
<script>
import {getArticleByPage} from "@/api/multimedia";
import {mapGetters} from "vuex";
import {getDevice} from "@/utils/get-device";

export default {
  name:'tableCard',
  props:['articleType'],
  data() {
    return {
      tableData: [],
      total:0,
      currentPage:1,
      pageSize:10,
      layout:'total, sizes, prev, pager, next, jumper'
    }
  },
  created() {
    if (getDevice()){
      this.layout='total,prev, pager, next'
    }
    this.getArticleByType()
  },
  computed:{
    ...mapGetters(['device'])
  },
  methods:{
    handleSizeChange(val) {
      this.pageSize = val
      this.getArticleByType()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getArticleByType()
    },
    getArticleByType(){
      if (this.articleType==='NEWS')
        getArticleByPage(this.currentPage,this.pageSize,1).then(response=>{
          const {total,news}=response.data
          this.total=total
          this.tableData=news
        }).catch(()=>{
          this.$notify({
            type:"error",
            message:'获取文章失败',
            duration:2000
          })
        })
      else {
        getArticleByPage(0,10,0).then(response=>{
          const {total,news}=response.data
          this.total=total
          this.tableData=news
        }).catch(()=>{
          this.$notify({
            type:"error",
            message:'获取文章失败',
            duration:2000
          })
        })
      }
    }
  }
}
</script>
<style scoped>
.fyt{
  border-radius:0  0 5px 5px;
  justify-content: center;
  background: #ece9e6;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, rgb(236, 233, 230), rgb(255, 255, 255));
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, rgb(236, 233, 230), rgb(255, 255, 255));
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
</style>
